import React, { Component } from 'react';
import Editor from '@/utils/Editor';
import { Form, Icon, Select, Button } from 'antd';
import {withPropsAPI} from "gg-editor";
import {connect} from "dva/index";
import {message} from "antd/lib/index";
import styles from '@/pages/Dialog/action/index.less';
import savebuttom from '@/assets/account/robotSetup/savebuttom.png';
import delImg from '@/assets/dialog/del1.png';
import addImg from '@/assets/dialog/add1.png';

const formItemLayout = {
  labelCol: { span: 1 },
  wrapperCol: { span: 20 },
};

@connect(({ dialogCommon, loading }) => ({
  dialogCommon,
  loading: loading.models.data,
}))
class ActionClear extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      currentSlots: [],
      slots: [],
      dialogId: props.dialogId,
      nodeId: props.nodeId,
      stage: props.stage,
      stageId: "",
    };
  }
  componentDidMount() {
    this.getInit();
    this.getDialogSlots();
  };

  getInit = () =>{
    const { nodeId, dialogId, stage } = this.state;
    console.log("nodeId: " + nodeId + ", dialogId :" + dialogId);
    const { dispatch } = this.props;
    dispatch({
      type: 'dialogCommon/getStage',
      payload: {
        dialogId: dialogId,
        nodeId: nodeId,
        stage: stage,
        field: "clear",
      },
      callback:(res)=>{
        console.log("动作-清空词槽:" + JSON.stringify(res));
        this.setState({
          stageId: res.dialogStage._id,
          currentSlots: res.dialogStage.clear==null?[]:res.dialogStage.clear.clearSlots
        })
      }
    });
  };

  getDialogSlots = ()=>{
    const { dialogId } = this.state;
    const { dispatch } = this.props;
    dispatch({
      type: 'dialogCommon/getDialogSlots',
      payload: {
        dialogId: dialogId
      },
      callback:(res)=>{
        console.log("词槽列表 :" + JSON.stringify(res));
        this.setState({
          slots: res==null?[]:res,
        })
      }
    });
  };

  changeSlotValue = (val,index) =>{
    const { currentSlots } = this.state;
    currentSlots[index] = val;
    this.setState({
      currentSlots
    });
  };

  addClearSlots = () =>{
    const { currentSlots } = this.state;
    currentSlots.push("");
    this.setState({
      currentSlots,
    })
  };

  closeSlot = (index) =>{
    const { currentSlots } = this.state
    currentSlots.splice(index, 1)
    this.setState({
      currentSlots,
    })
  };

  save = () =>{
    const { currentSlots,stageId } = this.state;
    const { dispatch } = this.props;
    console.log(currentSlots);
    if(currentSlots.length === 0){
      return message.error('请添加需要清空的词槽')
    }
    dispatch({
      type: 'dialogCommon/saveStage',
      payload: {
        _id: stageId,
        field: "clear",
        clear: {
          clearSlots: currentSlots,
          retryClearSlots: true,
          setTime: new Date().getTime()
        },
      },
      callback:(res)=>{
        if(res.code === 0){
          message.info("保存成功");
        }else{
          message.info("保存失败");
        }
      }
    });
  };

  forMap = (itemId,index) => {
    const {slots} = this.state;
    const OptionElem = slots.map(this.forMapSlotsOption);
    return (
      <span style={{display:"inline-block",marginTop:5}}>
        <Select size='large' value={itemId} defaultValue='none' style={{ width: 120,marginLeft: 25, boxShadow: "0 2px 15px 0 rgba(1, 1, 1, 0.15)", border: "none" }} onChange={(value) => this.changeSlotValue(value,index)}>
          <Select.Option value='none'>请选择词槽</Select.Option>
          {OptionElem}
        </Select>
         <img src={delImg} alt="" height={20} style={{marginLeft:10,cursor:"pointer",marginTop:-5}} onClick={() =>this.closeSlot(index)} />
      </span>
    );
  };

  forMapSlotsOption = option =>{
    return (
      <Option value={option.slotId}>{option.slotName}</Option>
    )
  };

  render() {
    const { tag } = this.props;
    const tagChild = this.state.currentSlots.map((itemId,index)=>this.forMap(itemId,index));
    return(
      <div style={{margin: '15px 0px', paddingLeft:'30px'}}>

        <Form.Item {...formItemLayout} label="">
          <div style={{display:'inline-block',width:'100%'}}>
            <span style={{color:"#c8c8c8",fontSize:18}}>清空词槽</span>
            <span>
                {tagChild}
            </span>
            <img src={addImg} alt="" height={47} style={{marginLeft:10,cursor:"pointer"}}  onClick={this.addClearSlots} />
          </div>
        </Form.Item>

        {/*<div>*/}
        {/*  <Button type="primary" onClick={this.save}>保存</Button>*/}
        {/*</div>*/}
        <div className={styles.flexcen}>
          <img onClick={this.save} src={savebuttom} />
        </div>
      </div>
    )
  }
}

export default withPropsAPI(ActionClear);
